<template>
	<view class="content">
		<view class="mingxi_top">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view>当前选择&nbsp;&nbsp;{{date}}</view>
			</picker>
		</view>
		<view class="mingxi_top">
				<view>--当前总价:&nbsp;&nbsp;{{todaySpend}}&nbsp;--</view>
		</view>
		<view class="shuju">
			<view class="nodata" v-if="todaySpend == 0">
				<p>账单</p>
				<p>这里空空如也</p>
			</view>
			<view class="" v-else style="text-align:left;padding: 20rpx;">
				<view class="neirong" v-for="(item,index) in shuju" :key="index" >
					消费类型:{{item.da_lei}}&nbsp; 消费金额:{{item.da_money}} &nbsp;<br>
					备注:{{item.da_beizhu}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				date: currentDate,
				todaySpend: 0,
				// chuxian:0,
				shuju:{
					
				}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReady(){
			this.getdata();
		},
		onShow() {
			this.getdata();
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.getdata()
			},
			getdata(){
				const userInfo = uni.getStorageSync('userInfo');
				var m_data={}
				m_data.appid = userInfo.appid		
				m_data.date = this.date
				const res = this.$myRequest({
					url:'/mingxi',
					data:m_data,
					method: 'post'
				})
				res.then((result) => {
					var v_data = result.data.data;
					if (v_data == ''){
						this.todaySpend = 0;
					} else {
						var money = 0;
						for(var i = 0; i < v_data.length;i++){
							money += v_data[i].da_money
						}
						this.todaySpend = money;
					}
					// console.log(v_data)
					this.shuju = v_data
					// console.log(this.shuju)
				})
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mingxi_top{
		text-align: center;
		width: 95%;
		background-color: #ccc;
		margin-top: 20rpx;
		font-size: 40rpx;
		border-radius: 30rpx;
		padding:  20rpx 0;
	}
	.shuju{
		width: 95%;
		margin-top: 20rpx;
		border-radius: 30rpx;
		background-color: antiquewhite;
	}
		
	.nodata{
		margin-top: 20rpx;
		text-align: center;
		font-size: 40rpx;
		height: 150rpx;
	}
		
	.neirong{
		font-size: 50rpx;
		margin-top: 20rpx;
	}
</style>
